<template>
  <div>
    <van-nav-bar title="首页">
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>


    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in menus" :key="index"><img :src="$host+item.img" alt=""></van-swipe-item>
    </van-swipe>

    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
        限时抢购
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
        积分商城
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
        联系我们
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
        商品分类
      </van-grid-item>
    </van-grid>

    <van-tabs type="card">
      <van-tab title="热门推荐">
        <van-card
        @click="change(item.id)"
          :price="item.price"
          desc="描述信息xxx"
          :title="item.goodsname"
          :thumb="$host+item.img"
          v-for="(item,index) in goods"
          :key="index"
        >
          <template #tags>
          </template>
          <template #footer>
            <van-button width="20px" @click.stop="join(item.id)"  icon="shopping-cart-o" size="small" type="primary" />
          </template>
        </van-card>
      </van-tab>

      <van-tab title="发现新品">
        <van-card
        @click="change(item.id)"
          :price="item.price"
          desc="描述信息xxx"
          :title="item.goodsname"
          :thumb="$host+item.img"
          v-for="(item,index) in goodsone"
          :key="index"
        >
          <template #tags>
          </template>
          <template #footer>
            <van-button width="20px" @click.stop="join(item.id)" icon="shopping-cart-o" size="small" type="primary" />
          </template>
        </van-card>
      </van-tab>
      <van-tab title="所有商品">

        <van-card
        @click="change(item.id)"
          :price="item.price"
          desc="描述信息xxx"
          :title="item.goodsname"
          :thumb="$host+item.img"
          v-for="(item,index) in goodstwo"
          :key="index"
        >
          <template #tags>
          </template>
          <template #footer>
            <van-button width="20px" @click.stop="join(item.id)" icon="shopping-cart-o" size="small" type="primary" />
          </template>
        </van-card>
      </van-tab>
      <div class="ip"></div>
    </van-tabs>
  </div>
</template>

<script>
import { getbannerList,getgood,joini } from "../radio/index";
export default {
  created() {
    this.ruleForm.uid=JSON.parse(localStorage.getItem("userInfo2")).uid
    this.banner();
    this.getgoods();
  },
  data() {
    return {
      ruleForm:{
        uid:"",
        goodsid:"",
        num:1
      },
    menus:[],
    goods:[],
    goodsone:[],
    goodstwo:[]
    };
  },
  methods: {
    async joingouwu(){
    let res=await joini(this.ruleForm)
    if(res.code==200){
      this.$toast('添加成功');
    }
    },
    join(id){
      this.ruleForm.goodsid=id
      this.joingouwu()
    },
    async banner() {
      let res = await getbannerList();
      this.menus=res.list
    },
      async getgoods() {
      let res = await getgood();
      this.goods=res.list[0].content
      this.goodsone=res.list[1].content
      this.goodstwo=res.list[2].content
      console.log(res);
    },
    change(id){
      this.$router.push("/xiang/"+id)
    }
  },
};
</script>

<style scoped>
img{
  width: 450px;
  height: 296px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
 .my-swipe .van-swipe-item {
   height: 296px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .ip{
    width: 300px;
    height: 100px;
  }
</style>